<template>
	<view class="center">
		<!-- 标题 -->
		<view class="header-title" :style="{paddingTop:statuHeight+'px'}">视频上传</view>
		<!-- 步骤条 -->
		<view class="Article-steps">
			<view class="item-column-container">
				<view class="item-steps-box" v-for="(item,index) in options" :key="index">
						<view class="item-steps"></view>
						<view class="item-border"></view>
				</view>
			</view>
			<view class="item-neme-box">
				<view v-for="(item,index) in options" class="item-naem" :key="index">{{item.title}}</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="main">
			<view class="title-input-box">
				<view class="video-title">视频标题</view>
				<input 
				placeholder="请输入视频标题" 
				v-model="addVideoFrom.vtitle"
				placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #5C2378;"/>
			</view>
			<view class="title-input-box">
				<view class="video-title">视频描述</view>
				<input 
				placeholder="150字以内" 
				v-model="addVideoFrom.vnote"
				placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #5C2378;"/>
			</view>
			<!--一级视频分类 -->
			<view class="video-class-box">
				<view class="video-class">
					<view class="class-title">视频分类</view>
					<view class="picker-icons">
						<picker @change="bindPickerChange($event,tabArray)" :value="pickerText" :range="tabArray" :range-key="'label'">
							<view class="prcker-name">{{pickerText>-1?tabArray[pickerText].label:'请选择'}}</view>
						</picker>
						<uni-icons type="arrowdown" size="20"></uni-icons>
					</view>			
				</view>
				<!-- 二级分类 -->
				<view class="video-class">
					<view class="class-title">视频分类</view>
					<view class="picker-icons">
						<picker @change="towPickerChange" :value="twoIndex" :range="twoClass" :range-key="'label'">
							<view class="prcker-name">{{twoIndex>-1?twoClass[twoIndex].label:'请选择'}}</view>
						</picker>
						<uni-icons type="arrowdown" size="20"></uni-icons>
					</view>			
				</view>
			</view>
			<!-- 视频与封面图 -->
			<view class="video-homeImg">
				<!-- 图片上传 -->
				<view class="img-upload-box">
					<view class="add-img"  v-if="!coverImg">
						<uni-icons type="plusempty" size="40" color="#CECECE"></uni-icons>
					</view>
					<image class="cover" mode="aspectFill" v-else :src="coverImg"></image>
					<view class="btn-updoal-img" @click="imgUpload(1)">点击上传封面</view>
				</view>
				<!-- 视频上传 -->
				<view>
					<view class="img-upload-box">
						<view class="add-img" v-if="!videoUrl">
							<uni-icons type="plusempty" size="40" color="#CECECE"></uni-icons>
						</view>
						<view class="upload-video" v-else>
							<video
								:src="videoUrl"
								object-fit='cover'
								:controls="false"
								:initial-time="1"
								:duration="5"
								:show-fullscreen-btn="false"
								:show-play-btn="false"
								:direction="0"
								x5-playsinline="true"
							>
								</video>
						</view>
						<view class="btn-updoal-img" @click="uploadVideo">点击上传视频</view>
					</view>
				</view>
			</view>
			<!-- 视频详情 -->
			<view>
				<view class="details-title">视频详情</view>
				<view class="textarea-num">
					<textarea class="uni-textarea" v-model="addVideoFrom.recommendDoc"
						placeholder="请输入视频描述" placeholder-class="placeholder" :disable-default-padding="true"/>
					<view>
						<view class="img-box">
							<view class="detail-img-back" @click="imgUpload(2)" v-if="goodsImgList.length < 9">
								<uni-icons type="image" class="icons-img" color="#ADADAD" size="25"></uni-icons>
							</view>
							<view class="img-list" v-for="(item,index) in goodsImgList" :key="index" @touchstart.prevent="touchstart(index)"  @touchend.prevent="touchend">
								<image class="img" mode="aspectFill" :src="item"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="footer">
				<view class="reminder">温馨提示：</view>
				<view class="reminder-text">上传请耐心等待官方审核</view>
				<view class="btn-add" @click="addVideoClick">确认提交</view>
			</view>
			<!-- 定位的缺口 -->
			<view class="position-left"></view>
			<view class="position-left right"></view>
		</view>
		<tabber :tabIndex="2"></tabber>
	</view>
</template>

<script>
	import tabber from '@/components/tabbar.vue'
	import { $POST, $GET } from '../../network/api.js'
	export default {
		components:{tabber},
		data() {
			return {
				Loop:'',
				formData: {
					name:''
				},
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				imgIdList: [], // 详情里图片数据
				addVideoFrom: { // 新增视频参数
					account: '', // 用户名
					vtitle: "", // 视频标题
					vnote: "", // 视频描述
					channelId: '', // 一级分类id
					videoTypeId: '', // 二级发分类id
					coverId: '', // 封面id
					videoId: '', // 视频id
					recommendDoc: "", // 详情
					recommendImgIdList: "", // 详情图片id1,2,3
				},
				goodsImgList: [], // 详情里的图片
				videoUrl: '', // 视频地址
				coverImg: '', // 封面图
				Size:2*1024*1024,//定义图片大小
				classData: [], // 临时存一级数据
				remnant:0,
				twoIndex: -1, // 二级分类绑定的index
				pickerText: -1, // // 一级分类绑定的index
				tabArray: [], // 一级分类数据
				twoClass: [], // 二级分类数据
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
				options: [
					{ title: "上传视频", desc: 1}, { title: "视频信息", desc: 2},
					{ title: "后台审核", desc: 3}, { title: "发布成功", desc: 4},
					{ title: "赚取佣金", desc: 4}
				]
			}
		},
		onLoad() {
			this.getTopTabbar() // 一级分类方法
		},
		onShow() {
			// 隐藏官方tabber
			uni.hideTabBar()
		},
		methods: {
			// 确认提交
			addVideoClick() {
				if(!this.verify()) return false
				this.addVideoFrom.account = this.userData.account // 登录人账号赋值
				$POST("/boke-item/video/commitVideoUpload",this.addVideoFrom).then(res => {
					uni.showToast({	title: '保存成功',	icon: 'none' });
					this.addVideoFrom.account = '' // 清空数据
					this.addVideoFrom.vtitle = ''
					this.addVideoFrom.vnote = ''
					this.addVideoFrom.channelId = ''
					this.addVideoFrom.videoTypeId = ''
					this.addVideoFrom.coverId = ''
					this.addVideoFrom.videoId = ''
					this.addVideoFrom.recommendDoc = ''
					this.addVideoFrom.recommendImgIdList = ''
					this.goodsImgList = []
					this.coverImg = ''
					this.videoUrl = ''
					this.twoIndex = -1
					this.pickerText = -1
				})
			},
			// 验证
			verify() {
				if(!this.addVideoFrom.vtitle) {
					uni.showToast({	title: '请输入视频标题',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.vnote) {
					uni.showToast({	title: '请输入视频描述',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.channelId || !this.addVideoFrom.videoTypeId) {
					uni.showToast({	title: '请选择分类',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.coverId) {
					uni.showToast({	title: '请上传封面图',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.videoId) {
					uni.showToast({	title: '请上传视频',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.recommendDoc) {
					uni.showToast({	title: '请输入视频详情',	icon: 'none' });
					return false
				}
				if(!this.addVideoFrom.recommendImgIdList) {
					uni.showToast({	title: '请上传详情图片',	icon: 'none' });
					return false
				}
				return true
			},
			// 长按删除
			touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '确认要删除吗？',
						success: function(res) {
							if (res.confirm) {
								that.goodsImgList.splice(index,1) // 删除多图数据
								that.imgIdList.splice(index,1) // 删除数组id
								that.addVideoFrom.recommendImgIdList = that.imgIdList.map(item => item).join(",")	// 数组id转字符id并赋值
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}.bind(this), 1000);
			},
			touchend() {
				console.log('结束')
				clearInterval(this.Loop);
			},
			// 上传视屏
			uploadVideo() {
				const vm = this
					uni.chooseVideo({
						count: 1,
						compressed: false,
						sourceType: ['camera', 'album'],
						success: function (res) {
							const formData = res.tempFilePath
							wx.showLoading({
								 title: '视频上传中'
							})
							uni.uploadFile({
								fileType: 'video',
								url:"http://192.168.130.238:8002/boke-item/file/fileUpload/1",
								header:{
									Authorization: uni.getStorageSync('authorization'),
									deviceID: "A13428903911"
								},
								method:'post',
								filePath:formData,
								name:'file',
								 success: (res) => { 
									 wx.hideLoading()
									 const videoData = JSON.parse(res.data)
									 if(videoData.code == "0000000") {
										  const { furl, fid } = videoData.data
											vm.videoUrl = furl // 回显视频
											console.log("视频地址:",vm.videoUrl)
											vm.addVideoFrom.videoId = fid // 视频id
											uni.showToast({	title: '上传成功',	icon: 'none' });
									 }else{
										 uni.showToast({	title: data.msg,	icon: 'none' });
									 }
								 },
								 fail: (error) => {
									wx.hideLoading()
									// uni.showToast({	title: '上传失败',	icon: 'none' });
								 }
							})
						}
				})
			},
			// 图片上传
			imgUpload(num) {
				const vm = this
				let amount = null
					if (num === 2) {
						amount = 9 - vm.goodsImgList.length
					}
					if(num === 1) {
						amount = 1
					}
				uni.chooseImage({
					  count: 1,
					  sourceType: ['album','camera'],
					  success: function(res) {
							console.log("选择文件",res)
							const formData = res.tempFilePaths
							//限制上传图片大小（2M）
							for(let i = 0; i < res.tempFiles.length;i++){
								if(res.tempFiles.size > vm.Size){
										uni.showModal({
											content: '上传图片不能大于2M!',
											showCancel: false,
										});
									return false;
								}
							}
							uni.showLoading({ title: '图片上传中' })
							 for(var i=0; i<formData.length;i++){
								 uni.uploadFile({
								 	url:"http://192.168.130.238:8002/boke-item/file/fileUpload/2",
								  	filePath: formData[i],
								  	method:'post',
								  	name: 'file',
								 	header:{
								 		Authorization: uni.getStorageSync('authorization'),
										deviceID:"A13428903911"
								 	},
								  	formData: {
								  		type: 2,
								  	},
								  	success: (res) => {
								 		uni.hideLoading()
								 		const { data } = res
								 		const imgData = JSON.parse(data)
								 		if (imgData.code == "0000000") {
								 			const { furl, fid } = imgData.data
								 			if (num === 1) {
								 				vm.coverImg = furl // 回显图片
												vm.addVideoFrom.coverId = fid // 赋值封面id
								 			}
											if(num === 2) {
												vm.goodsImgList.push(furl)
												vm.imgIdList.push(fid)
												vm.addVideoFrom.recommendImgIdList = vm.imgIdList.map(item => item).join(",")	// 数组id转字符id并赋值
												console.log("详情图片id:",vm.addVideoFrom.recommendImgIdList)
											}
								 			uni.showToast({	title: '上传成功',	icon: 'none' })
								 		}
								  		else{
								 			uni.showToast({	title: imgData.msg,	icon: 'none' });
								 		}
								  	},
								 	fail: (error) => { wx.hideLoading() }
								 })	
							 }
					  }
					})
				},
			// 获取头部选项卡-一级分类
			async	getTopTabbar() {
				const res = await $GET('/boke-item/channel/minorVideoType')
				this.classData = JSON.parse(JSON.stringify(res.data))
				this.tabArray = res.data.map(item => ({label: item.vcName, value: item.vcId}))
			},
			// 二级分类事件
			towPickerChange(e) {
				this.twoIndex = e.target.value
				this.addVideoFrom.videoTypeId = this.twoClass[e.target.value].value // 二级分类赋值
			},
			// 下拉框事件
			bindPickerChange(e,storage) {
				this.pickerText = e.target.value
				this.addVideoFrom.channelId = storage[this.pickerText].value // 一级id赋值
				console.log("storage",storage[this.pickerText].value)
				this.classData.forEach(item => {
					if(item.vcId == storage[this.pickerText].value) {
						this.twoClass = item.minorTypeList.map(j => ({label: j.tname, value: j.tid}))
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
html { overflow-y: scroll; }
	.center{
		background-color: #5C2378;
		margin-bottom:95rpx;
		padding-bottom: 33px;
		.header-title{
			padding-bottom: 20rpx;
			background-color: #5C2378;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}
		.Article-steps{
			margin-top:70rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FDFDFF;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			.item-column-container{
				display: flex;
				justify-content: center;
				align-items: center;
				.item-steps-box:last-child{
					.item-border{
						display: none !important;
					}
				}
				.item-steps-box{
					display: flex;
					align-items: center;
					.item-steps{
						width: 14rpx;
						height: 14rpx;
						background: #FFFFFF;
						border-radius: 50%;
					}
					.item-border{
						width: 118rpx;
						height: 4rpx;
						background: #FFFFFF;
						border-radius: 2rpx;
					}
				}
			}
			.item-neme-box{
				display: flex;
				align-items: center;
				justify-content: center;
				.item-naem{
					margin: 40rpx 20rpx;
					color: #FDFDFF;
				}
			}
		}
		.main{
			margin: 0 28rpx;
			background-color: #FFFFFF;
			padding: 44rpx 24rpx 0 24rpx;
			border-radius: 20rpx;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			.title-input-box{
				width: 641rpx;
				height: 89rpx;
				background-color: #F7F7F7;
				display: flex;
				align-items: center;
				border-bottom: 1rpx dashed #999999;
				.video-title{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #222222;
					padding: 0 80rpx 0 28rpx;
				}
			}
			.video-class-box{
				padding: 33rpx 40rpx 28rpx  28rpx;
				background-color: #F7F7F7;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.video-class{
					width: 40%;
					
					.class-title{
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #222222;
						margin-bottom: 19rpx;
					}
					.picker-icons{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.prcker-name{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #5C2378;
						}
					}
				}
			}
			// 视频与封面图
			.video-homeImg{
				padding:102rpx 0 33rpx 0;
				border-bottom: 1rpx dashed #E6E6E6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.img-upload-box{
					display: flex;
					flex-direction: column;
					.add-img{
						width: 300rpx;
						height: 205rpx;
						background: #F7F7F7;
						border-radius: 10rpx;
						text-align: center;
						line-height: 205rpx;
					}
					.cover{
						width: 300rpx;
						height: 205rpx;
					}
					.btn-updoal-img{
						width: 300rpx;
						height: 57rpx;
						background: #EE4242;
						border-radius: 0 0 12rpx 12rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 57rpx;
						text-align: center;
					}
					// 视频样式
					.upload-video{
						width: 300rpx;
						height: 205rpx;
						.zu_logo{
							width: 100% !important;
							height: 100% !important;
						}
						video{
							width: 100% !important;
							height: 100% !important;
						}
						/deep/ .uni-video-cover-duration{
							display: none !important;
						}
					}
				}
			}
			.details-title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				padding: 24rpx 0;
			}
				.textarea-num {
				border-radius: 4rpx;
				box-sizing: border-box;
				width: 100%;
				background: #F7F7F7;
				// height: 338rpx;
				// 多行输入框
				.uni-textarea {
					width: 100%;
					padding: 12px 12px 0 12px;
					line-height: 35rpx;
					height: 250rpx;
					border-radius: 4rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					background: #F7F7F7;
					/deep/ .placeholder {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 0.24);
					}
				}
				.img-box::-webkit-scrollbar {
						display: none; 
					}
				.img-box{
					padding: 24rpx;
					width: 100%;
					display: flex;
					align-items: center;
					overflow-x: auto; 
					overflow-y: hidden;
					display: -webkit-box; 
					-webkit-overflow-scrolling: touch;
					.detail-img-back{
						width: 80rpx;
						height: 80rpx;
						background-color: #D5D5D5;
						line-height: 80rpx;
						text-align: center;
						border-radius: 5rpx;
						margin-right: 30rpx;
					}
					.img-list{
						width: 80rpx;
						height: 80rpx;
						margin-right: 15rpx;
						border-radius: 5rpx;
						.img{
							width: 100%;
							height: 100%;
							border-radius: 5rpx;
						}
					}
				}
			}
			// 底部
			.footer{
				padding-bottom: 97rpx;
				.reminder{
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #333333;
					padding: 38rpx 0 27rpx 0;
				}
				.reminder-text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #9D9D9D;
					text-align: center;
					padding-bottom: 25rpx;
				}
				.btn-add{
					width: 540rpx;
					height: 88rpx;
					background: linear-gradient(90deg, #B83DF1, #852CAE);
					border-radius: 44rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					margin: auto;
				}
			}
			// 定位的缺口
			.position-left{
				width: 65rpx;
				height: 44rpx;
				background-color: #5C2378;
				border-radius: 50%;
				transform:rotate(90deg);
				-ms-transform:rotate(90deg); /* IE 9 */
				-moz-transform:rotate(90deg); /* Firefox */
				-webkit-transform:rotate(90deg); /* Safari and Chrome */
				-o-transform:rotate(90deg); /* Opera */
				position: absolute;
				left: -21px;
				top:184px;
			}
			.position-left{
				width: 65rpx;
				height: 44rpx;
				background-color: #5C2378;
				border-radius: 50%;
				transform:rotate(90deg);
				-ms-transform:rotate(90deg); /* IE 9 */
				-moz-transform:rotate(90deg); /* Firefox */
				-webkit-transform:rotate(90deg); /* Safari and Chrome */
				-o-transform:rotate(90deg); /* Opera */
				position: absolute;
				left: -21px;
				top:184px;
			}
			.right{
				left: unset!important;
				right: -21px;
			}
		}
	}
	
</style>
